<template>
         <div id="goods_cart" class="tab-pane active">
          <table class="table table-bordered table-hover table-condensed table-striped">
            <thead>
                <!-- 头部 -->
              <tr class="active">
                <th class="text-center"><span @click="checkAll" class="cart-all">全选</span></th>
                <th class="text-center">商品</th>
                <th class="text-center">单价</th>
                <th class="text-center">数量</th>
                <th class="text-center">小计</th>
                <th class="text-center">操作</th>
              </tr>
            </thead>
            <tbody>
             <GoodsItem v-for="itemobj of goodsList" :item="itemobj" :key="itemobj.id"/>
              <!-- 底部 -->
              <tr class="cart-bottom">
                <td colspan="6" id="mytotal">
                  <div class="text-center font-weight-bolder text-info ">
                    <div class="float-left">
                      <span class="cart-bottom-span">已选择<span class="cart-total-num">{{nowChecked}}</span>件商品</span>
                      <span class="cart-bottom-span">总计：<span class="cart-total-price ">{{totalPrice}}</span></span>
                    </div>
                    <div class="text-right">
                      <button class="cart-bottom-btn btn btn-info btn-lg sub">提交订单</button>
                    </div>
                  </div>
                </td>

              </tr>
            </tbody>
          </table>
        </div>
        
</template>

<script>
import GoodsItem from "./GoodsItem";
import { nanoid } from "nanoid";
import axios from 'axios';
export default {
  name: "GoodsList",
  data() {
    return {
      nowChecked: 0,
      totalPrice: 0,
      goodsList: []
    };
  },
  methods: {
    checkAll() {
      this.goodsList.forEach(element => {
        element.isChecked = true;
      });
    },
    computePrice() {//计算价格及总数
      let num = 0;
      let totalprice = 0;
      this.goodsList.forEach(item => {
        if (item.isChecked == true) {
          num += item.num;
          totalprice += item.num * item.price;
        }
      });
      this.nowChecked = num;
      this.totalPrice = totalprice.toFixed(2);
    },
    addTotalNum(idx) {//增加总数
      this.goodsList.forEach(item => {
        if (item.id == idx) {
          item.num++;
        }
      });
    },
    deleteTotalNum(idx) {//减少总数
      this.goodsList.forEach(item => {
        if (item.id == idx && item.num > 0) {
          item.num--;
        }
      });
    },
    changeChecked(idx, value) {
      this.goodsList.forEach(item => {
        if (item.id == idx) {
          // console.log(idx,item.isCheck);
          item.isChecked = !item.isChecked;
          this.computePrice();
        }
      });
    },
    deleteItem(idx) {
      if (confirm("您确认要删除该商品吗?")) {
        this.goodsList.forEach((item, index) => {
          if (item.id == idx) {
            this.goodsList.splice(index, 1);
            this.$bus.$emit("sendItem", item);
          }
        });
      }
    },
    addItem(item) {
      this.goodsList.unshift(item);
    }
  },
  watch: {
    goodsList: {
      deep: true,
      handler() {
        this.computePrice();
      }
    }
  },
  mounted() {
    axios.get(`/data/goods.json`).then(
      response => {
					console.log('请求成功了',response.data);
					this.goodsList = response.data;
					},
					error => {
					console.log('请求失败',error.message);
					}
    )
    this.$bus.$on("changeCheck", this.changeChecked);
    this.$bus.$on("addNum", this.addTotalNum);
    this.$bus.$on("deleteNum", this.deleteTotalNum);
    this.$bus.$on("deleteItem", this.deleteItem);
    this.$bus.$on("addBackItem", this.addItem);
  },
  beforeDestroy() {
    this.$bus.$off("changeCheck");
    this.$bus.$off("addNum");
    this.$bus.$off("deleteNum");
    this.$bus.$off("deleteItem");
  },
  components: {
    GoodsItem
  }
};
</script>

<style scoped lang="css" scoped>
</style>
